<!--
 * @Author: Wushiqi
 * @Descripttion: 单项评论
 * @Date: 2020-10-18 17:21:10
 * @LastEditors: Wushiqi
 * @LastEditTime: 2020-10-19 23:14:32
-->
<template>
  <div class="comment-items">
    <div v-for="(item, key) in commentChild" :key="key" class="comment-item">
        <div class="user-img">
          <img v-if="item.userinfo && item.userinfo.user_img" :src="item.userinfo.user_img" alt />
          <img v-else src="@/assets/default_img.jpg" alt />
          <p>
            <span>{{ item.userinfo.name }}</span>
            <span>{{ item.comment_date }}</span>
          </p>
        </div>
        <div class="comment-content">
          <div v-if="!temp">{{ item.comment_content }}<span class="publish" @click="PostItemcomment(item.comment_id)">回复</span></div>
          <div v-else>回复 <span style="color: #478ef0;">{{ item.parent_user_info.name }}</span>：{{ item.comment_content }}<span class="publish" @click="PostItemcomment(item.comment_id)">回复</span></div>
        </div>
        <div>
          <comment-child-item :commentChild="item.child" :temp="true" @postChild="postChild" />
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'commentChildItem',
  props: {
    commentChild: {
      default: () =>[],
      type: Array
    },
    temp: {
      default: false,
      type: Boolean
    }
  },
  methods: {
    PostItemcomment(id) {
      this.$emit('postChild',id)
      this.$emit('PostPublish',id)
    },
    postChild(id) {
      this.PostItemcomment(id)
      this.$emit('PostPublish',id)
    }
  }
}
</script>

<style lang="scss">
.comment-items {
  // padding: 0 11.111vw;
  .comment-item {
    display: flex;
    flex-direction: column;
    .user-img {
      display: flex;
      img {
        margin: 0 5px 10px 0;
      }
      p {
        flex: 1;
        font-size: 3.611vw;
        color: #555;
        display: flex;
        justify-content: space-between;
        margin-bottom: 1.398vw;
      }
    }
  }
  .comment-content {
    position: relative;
    margin-bottom: 2.778vw;
    .publish {
      position: absolute;
      right: 4.167vw;
      color: red;
    }
  }
}
</style>